const path = require('path')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode:'production',
    entry:'./src/main.js',
    output:{
      filename:'bundle.js',
      path:path.join(__dirname,'dist')
    },
    module:{
      rules: [
        {
          test:/.js$/,
          exclude:/node_modules/,
          use:{
            loader:'babel-loader',
            options:{
              presets:['@babel/preset-env']
            }
          }
        },
        {
          test:/.css$/,
          use:[
            'style-loader',
            // MiniCssExtracPlugin.loader,
            'css-loader'
          ]
        },
        {
          test:/.less$/,
          use:[
            'style-loader',
            'css-loader',
            'less-loader'
          ]
        },
        {
          test:/.png$/,
          use:{
            loader:'url-loader',
            options:{
              limit:10 * 1024, //小于10kb的图片转换为Data URLs，大于的仍然需要file-loader进行处理，所以也需要安装
              esModule: false
            }
          }
        },
        { test:/\.vue$/,exclude:/node_modules/,loader: 'vue-loader' },
      ]
    },
    plugins:[
      new VueLoaderPlugin(),
      new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
      new CopyWebpackPlugin(
         ["public"] // 需要拷贝的目录或者路径通配符
      ),
      new HtmlWebpackPlugin({
        title:'vue project',
        filename:'index.html',
        templateContent:`
          <html>
            <body>
              <div id="app"></div>
            </body>
          </html>
        `
      }),
    ]
}